<template>
	<view>
		<view class="box">
			<checkbox-group @change="checkChange">
				<view class="uni-flex uni-column">
					<view v-for="(item,index) in contacts" :key="index" class="checkitem">
						<checkbox :checked="item.checked?item.checked:item.ischeck" :value="item.value" style="transform:scale(0.7)" color="#00D5A2" />
						<view class="name uni-flex uni-column">
							<view>
								<text style="font-size: 32upx;">{{item.name}}</text>
							</view>
							<view>
								<text style="color: #C2C2C2;">{{item.label}}</text>
							</view>
						</view>
					</view>
					<view class="checkitem" v-if="schoolList.length>0">
						<checkbox value="4" :checked="num == 1?false:true" style="transform:scale(0.7)" color="#00D5A2" />
						<view style="display: flex;justify-content: space-between;align-items: center;width: 85vw">
							<view class="name uni-flex uni-column">
								<view>
									<text style="font-size: 32upx;">机构</text>
								</view>
								<view>
									<text style="color: #C2C2C2;">仅发布在机构界面</text>
								</view>
							</view>
							<view @click.stop="onselect" :style="{transform:isshow?'rotate(180deg)':'rotate(0deg)'}">
								<i style="font-size: 36upx;color: #C0C4CC; " class="iconfont iconcollapse" ></i>
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view style="width: 88vw;margin-left: auto;" v-if="isshow">
			<checkbox-group @change="schoolcheckChange">
				<view v-for="(item,index) in schoolList" :key="index" class="checkitem">
					<checkbox :checked="item.checked" :value="item.id+''" style="transform:scale(0.7)" color="#00D5A2" />
					<view class="name uni-flex uni-column">
						<view>
							<text style="font-size: 32upx;">{{item.nickname}}</text>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 联系人 */
				contacts: [
					 {
					 	name: '全部',
						label:'所有范围',
					 	value: '1',
					 	checked:false
					 },
					{
						name: '个人',
						label:'仅发布在个人页面',
						value: '2',
						ischeck:false,
					},
					{
						name: '学校',
						label:'仅发布在学校界面',
						value: '3',
						ischeck:false,
					}
				],
				isshow: false,
				schoolList:[],
				Release_scope:[],
				school_id:[],
				aoe:0,
				num:0
			}
		},
		onNavigationBarButtonTap(e) {
			console.log('e',e);
			if(this.Release_scope.indexOf('1')!=-1){
				this.Release_scope = []
				this.Release_scope = ['1']
			}
			uni.$emit('send_aoe',{
				Release_scope:this.Release_scope,
				school_id:this.school_id
			});
			uni.navigateBack({
				delta:1
			})
		},
		onShow() {
			this.getSchool();
		},
		onLoad(e) {
			console.log('onLoda',e.aoe);
			this.aoe = e.aoe
			this.aoe = this.aoe+''
			console.log('aor',this.aoe.split(','));
			this.Release_scope = this.aoe.split(',')
			console.log(this.Release_scope);
		},
		methods: {
			getSchool:function(){
				console.log('arr',this.Release_scope);
				if(this.Release_scope.indexOf('1')!=-1){
					this.Release_scope = []
					this.Release_scope = ['1']
				}
				console.log('arr2',this.Release_scope);
				this.$api.apiPost('user/shakeschool.Users/UserFollowList').then(res=>{
					if(res.data.code==200){
						this.schoolList = res.data.data.data;
						for (var i = 0; i < this.schoolList.length; i++) {
							this.schoolList[i].checked = false
							this.num = 1
							if(this.aoe == 1){
								this.schoolList[i].checked = true
								this.num = 0
							}
						}
						let arr = this.Release_scope
						for (var j = 0; j < arr.length; j++) {
							for (var i = 0; i < this.contacts.length; i++) {
								console.log(arr[j],this.contacts[i].value);
								if(arr[j] == this.contacts[i].value&&arr[j] == 1&&this.contacts[i].value == 1){
									this.contacts[i].checked = true
								}else if(arr[j] == this.contacts[i].value&&arr[j] != 1&&this.contacts[i].value != 1){
									this.contacts[i].ischeck = true
								}
							}
							if(arr[j] == 4){
								this.num = 0
								this.schoolList[0].checked = true
							}else{
								this.num = 1
								this.schoolList[0].checked = false
							}
						}
						console.log('contacts',this.contacts);
					}
				});
			},
			schoolcheckChange:function(evt){
				this.school_id = evt.detail.value;
				if(this.school_id.length>0){
					if(this.Release_scope.indexOf('4')==-1){
						this.Release_scope.push('4');
					}
				}
				this.schoolList[0].checked = false
				console.log(this.schoolList);
			},
			checkChange: function(evt) {
				console.log('check');
				this.Release_scope = evt.detail.value;
				if(this.Release_scope.indexOf('4')!=-1){
					this.schoolList.forEach((item,key)=>{
						item.checked = true;
						this.school_id .push(item.id);
					})
				}else{
					this.schoolList.forEach((item,key)=>{
						item.checked = false;
					})
				}
				this.$forceUpdate()
			},
			onselect: function() {
				this.isshow = !this.isshow;
			},
		}
	}
</script>

<style scoped>
	.contact-scroll {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100vw;
		height: calc(100vh - 90upx);
	}

	.box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 94%;
		margin: auto;
	}

	.divider {
		margin-top: 30upx;
		margin-bottom: 30upx;
		width: 100%;
		padding: 5upx 0;
		color: #000;
	}

	.divider-text {
		margin-left: 20upx;
	}


	.name {
		font-size: 35upx;
		padding: 8px;
	}

	.checkitem {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>
